<template>
    <div>
      <el-form :model="queryForm" inline>
        <el-form-item label="客户编号">
          <el-input v-model="queryForm.cusId" placeholder="请输入客户编号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button type="primary" @click="handleAdd">添加</el-button>
        </el-form-item>
      </el-form>
  
      <!-- 表格 -->
      <el-table :data="tableData" style="width: 100%;height:520px"
      :cell-style="{'text-align':'center'}"
      :header-cell-style="{'text-align':'center'}">
        <el-table-column label="序号">
          <template #default="scope">
            {{ (pagination.currentPage - 1) * pagination.pageSize + scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="id" label="编号"></el-table-column>
        <el-table-column prop="cusId" label="客户编号"></el-table-column>
        <el-table-column prop="orderNo" label="订单编号"></el-table-column>
        <el-table-column prop="orderDate" label="下单时间"></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
        <el-table-column prop="state" label="状态"></el-table-column>
        <el-table-column prop="createDate" label="创建时间"></el-table-column>
        <el-table-column prop="updateDate" label="更新时间"></el-table-column>
        <el-table-column prop="isValid" label="有效状态"></el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
          <template #default="scope">
            <el-button type="info" size="small" @click="handleEdit(scope.row)">
              <el-icon>
                <Edit/>
              </el-icon>
            </el-button>
            <el-button type="danger" size="small" @click="handleDelete(scope.row)">
              <el-icon>
                <Delete/>
              </el-icon>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <!-- 分页条 -->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pagination.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total">
      </el-pagination>
  
      <!-- 模态框 -->
      <el-row>
        <template v-if="modelForm.dialogFormVisible">
          <el-dialog :title="modelForm.title" v-model="modelForm.dialogFormVisible" width="30%">
            <el-form :model="modelData" :rules="rules" label-position="left" label-width="auto">
              <el-form-item label="客户编号:">
                <el-input v-model="modelData.cusId" placeholder="请输入客户编号"></el-input>
              </el-form-item>
              <el-form-item label="订单编号:">
                <el-input v-model="modelData.orderNo" placeholder="请输入订单编号"></el-input>
              </el-form-item>
              <el-form-item label="下单时间:">
                <el-input v-model="modelData.orderDate" placeholder="请输入下单时间"></el-input>
              </el-form-item>
              <el-form-item label="地址：">
                <el-input v-model="modelData.address" placeholder="请输入地址"></el-input>
              </el-form-item>
              <el-form-item label="状态:">
                <el-input v-model="modelData.state" placeholder="请输入状态"></el-input>
              </el-form-item>
              <el-form-item label="创建时间:">
                <el-input v-model="modelData.createDate" placeholder="请输入创建时间"></el-input>
              </el-form-item>
              <el-form-item label="修改时间:">
                <el-input v-model="modelData.updateDate" placeholder="请输入修改时间"></el-input>
              </el-form-item>
              <el-form-item label="有效状态:">
                <el-input v-model="modelData.isValid" placeholder="请输入有效状态"></el-input>
            </el-form-item>
            </el-form>
            <div class="dialog-footer">
              <slot name="footer">
                <el-button @click="closeModel()">取 消</el-button>
                <el-button @click="reset()">重 置</el-button>
                <el-button type="primary" @click="submit()">提 交</el-button>
              </slot>
            </div>
          </el-dialog>
        </template>    
      </el-row>
    </div>
  </template>
  
  
  <script setup>
  import {ref, reactive, onMounted} from 'vue';
  import {ElForm, ElFormItem, ElInput, ElButton, ElTable, ElTableColumn, ElPagination} from 'element-plus';
  import {Edit, Delete} from '@element-plus/icons-vue';
  import axios from "axios";

  axios.defaults.headers.common['Authorization'] = `Bearer` + localStorage.getItem('token');
  
  // 模态框信息
  const modelForm = reactive({
    input: '',
    title: '',
    dialogFormVisible: false,
    data: {},
  })
  
  // 模态框数据
  const modelData = reactive({
    id: '',
    cusId: '',
    orderNo: '',
    orderDate: '',
    address: '',
    state: '',
    createDate: '',
    updateDate: '',
    isValid: '',
  });
  
  // 查询表单数据
  const queryForm = reactive({
    cusId: '',
  });
  
  // 表格数据
  const tableData = ref([]);
  
  // 分页信息
  const pagination = reactive({
    currentPage: 1,
    pageSize: 10,
    total: 0,
  });

  // 模拟获取数据的函数
  const fetchData = async (queryForm) => {
  
    console.log("查询,参数为：{}",queryForm);
    const params = {
      cusId: queryForm.cusId,
      page: pagination.currentPage,
      pageSize: pagination.pageSize,
    };
    const result = await axios.get("/api/customerOrder/page",{params});
    console.log(result.data);
    if (result.data.code) {
      tableData.value = result.data.data.records;
      pagination.total = result.data.data.total;
    }
  };
  
  // 查询
  const handleSearch = () => {
    fetchData(queryForm);
  };
  
  // 分页大小改变
  const handleSizeChange = (newSize) => {
    pagination.pageSize = newSize;
    fetchData(queryForm);
  };
  
  // 当前页改变
  const handleCurrentChange = (newPage) => {
    pagination.currentPage = newPage;
    console.log("当前页改变:{}", pagination.currentPage);
    fetchData(queryForm);
  };
  
  // 添加
  const handleAdd = () => {
    // 实现添加逻辑
    console.log('添加');
  
    reset();
    modelForm.dialogFormVisible = true;
    modelForm.title = '新增数据';
  };
  
  // 编辑
  const handleEdit = (row) => {
    // 实现编辑逻辑
    console.log('编辑', row);
  
    reset();
    modelData.cusId = row.cusId;
    modelData.orderNo = row.orderNo;
    modelData.orderDate = row.orderDate;
    modelData.address = row.address;
    modelData.id = row.id;
    modelData.isValid = row.isValid;
    modelData.createDate = row.createDate;
    modelData.state = row.state;
    modelData.updateDate = row.updateDate;
    
    modelForm.dialogFormVisible = true;
    modelForm.title = '修改数据';
  };
  
  // 删除
  const handleDelete = (row) => {
    // 实现删除逻辑
    console.log('删除', row);
  
    this.$confirm('确认删除？','系统提示',{
      confirmButtonText:'确定',
      cancelButtonText:'取消',
      cancelButtonClass:'btn-custom-cancel',
      type:'warning'
    }).then(function(){
      axios.delete('/api/customerOrder/'+ row.id).then(res=>{
        if(res.data.code === '1'){
          msg("success","删除成功");
          onMounted();
        }else{
          msg("error", res.data.message);
        }
      })
    })
  };
  
  // 提交编辑信息
  const submit = () => {
    modelForm.dialogFormVisible = false;
  
    // 提交添加结果
    if (!modelData.id) {
      axios.post('/api/customerOrder/', modelData).then(res => {
        if(res.data.code === '1'){
          msg("success","添加成功");
        }else{
          msg("error", res.data.message);
        }
        modelForm.dialogFormVisible = false;
        onMounted();
      })
    } 
    // 提交修改结果
    else {
        axios.put('/api/customerOrder/', modelData).then(res => {
          if(res.data.code === '1'){
            msg("success","添加成功");
          }else{
            msg("error", res.data.message);
          }
        modelForm.dialogFormVisible = false;
        onMounted();
      })
    }
  }
  
  // 清空模态框
  const reset = () => {
    modelData.cusId = null;
    modelData.createDate = null;
    modelData.orderDate = null;
    modelData.orderNo = null;
    modelData.address = null;
    modelData.id = null;
    modelData.isValid = null;
    modelData.state = null;
    modelData.updateDate = null;
  }
  
  // 关闭模态框
  const closeModel = () => {
    modelForm.dialogFormVisible = false;
  }
  
  // 初始化数据
  onMounted(() => {
    fetchData(queryForm);
  });
  </script>
  
  <style scoped>
  </style>